
    <!-- 问题反馈 -->

    <template>
        
      <div>
        <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
        <div class="pb10px">
          
          <!-- ctrl+alt+l 格式化代码   -->
          <el-input v-model="searchForm.perName" @input="handleSearch" class="input1" clearable placeholder="请输入软件名称"
                    size="small" ></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" class="mr10px" @click="handleSearch">搜索</el-button>
        </div>
    
        <div>
          <el-button type="primary" @click="push" size="small">反馈</el-button>
        </div>
    
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
          prop="id"
          label="ID"
          width="70">
      </el-table-column>
      <el-table-column
          prop="name"
          label="项目ID"
          width="100">
      </el-table-column>
      <el-table-column
          prop="problemDescription"
          label="问题描述"
          width="200">
      </el-table-column>
      <el-table-column
          prop="evaluate"
          label="评价"
          width="150">
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态"
          width="100">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="发布时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="200">
      </el-table-column>
          <!-- fixed="right"-->
          <el-table-column label="操作"
                           width="150"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <!-- index索引 scope.row这一条数据所有的值 -->
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <!--自定义分页组件-->
        <custom-pages
            @current-change="currentChange"
            @size-change="sizeChange"
            :total="pageInfo.total"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.pageNum"
        >
        </custom-pages>
        <!--自定义分页组件-->
      

        <!--自定义抽屉组件-->
        <custom-drawer
            :form-data="formData"
            :rules-form="ruleForm"
            @close-drawer="closeDrawer"
            @submit-drawer="submitDrawer"
            :is-drawer-dialog="isDrawerDialog"
        >
          <div slot="content">
            <el-form-item label="项目名称" prop="projectId" >
            <el-select v-model="formData.projectId" placeholder="请选择项目">
              <el-option
                v-for="item in rolelist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="反馈问题" prop="problemDescription">
              <el-input v-model="formData.problemDescription" placeholder="请输入具体问题"></el-input>
            </el-form-item>
            
            
          </div>
        </custom-drawer>
        <!--自定义抽屉组件-->
  
        <el-dialog
          title="提示"
          :visible.sync="error"
          width="30%"
          append-to-body
          top="20%"
          ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
          <span>{{ message }}</span>
          <span slot="footer" class="dialog-footer">
              <el-button @click="error = false">取 消</el-button>
              <el-button type="primary" @click="error = false">确 定</el-button>
          </span>
          </el-dialog>
        
           
         
          
      </div>
      
    </template>
    
    <script>
    
    //引入混入
    import create from "@/mixins/create";
    import http from "@/utils/request"
    // import CustomPages from "@/components/CustomPages"
  
    export default {
      data() {
        //页面格式化 ctrl+alt+l
        return {
          api: {
            pageUrl: "/client/getproblem",
            saveUrl: "",//新增问题
            delUrl: "/client/deletemyproblem",//删除问题
            modUrl: "/client/updateproblem",//修改问题
          },
          ruleForm: {
            projectId: [
              {required: true, message: '请输入具体问题', trigger: 'blur'},
            ],
            problemDescription: [
              {required: true, message: '请输入具体问题', trigger: 'blur'},
            ],
            
          },
    
          formData: {
            userId:"",
            projectId:"",
            problemDescription: "", 
            
          },
          searchForm: {
            perName: ""
          },
          message:'',
          rolelist: [{
            id: '',
            name: ''
          }, ],
          value: '',
        }
      },
      mixins: [create],
      created() {
        this.getporject()
      },
      methods: {
        //跳转
        push(){
          this.$router.push('/FeedProblem')
        },

        getporject(){
            let formData1 = {
              userId:sessionStorage.getItem('userId')
            };
            
            http.get(`${'/client/getproject'}?${new URLSearchParams(formData1).toString()}`).then(res => {
               console.log(res)
               this.rolelist = res.data.data;
            })

      },

        getList() {
          let data = Object.assign(this.searchForm, this.pageInfo)
          
          let formData1 = {
            userId:sessionStorage.getItem('userId')
          };
          
          http.get(`${this.api.pageUrl}?${new URLSearchParams(formData1).toString()}`).then(res => {
              this.tableData = res.data.data
              this.pageInfo.total = res.data.total
              console.log(res)
          })
      },
      handleDelete(index, row) {
            // console.log(index, row);
            this.ids = [row.id]
            // this.batchDelete()
            const id =this.ids[0];
            let formData = {
                problemId: id,
            };
            //
            this.$confirm(`此操作将永久删除ID为[${this.ids[0]}]的数据, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                http.delete(`${this.api.delUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                })
            }).catch(() => {
                // this.message=res.data.msg,
                // this.error=true,
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                this.$refs.multipleTable.clearSelection();
            });
        },
        //提交数据
        submitDrawer(e) {
            //增加数据
            if(sessionStorage.getItem('judge') == '1'){
                http.post(this.api.saveUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        // this.$message({
                        //     message: res.data.msg,
                        //     type: 'error'
                        // });
                        this.getList()
                    }
                })
            }
            //修改数据
            else if(sessionStorage.getItem('judge') == '2'){
                http.put(this.api.modUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                        // this.$message({
                        //       message: res.data.msg,
                        //       type: 'error'
                        //   });
                      }
                })
            }
        },

      },
      
    };
    </script>
    
    <style scoped>
    .input1{
      width: 260px;
    }

    .notitle{
      color: black;
      font-size:25px;
      margin-top: 1%; 
      margin-left: 0%;
    }/* 面包屑 */

   
    </style>